<template>
  <view>
    <uni-search-bar radius="100" cancelText="筛选" placeholder="搜索订单">
    </uni-search-bar>
    <v-tabs activeColor="red" :bold="false" lineHeight="6rpx" lineColor="red" v-model="current" @change="changeTab"
      :tabs="tabs" field="name" fontSize="28rpx" :scroll="false">
    </v-tabs>

    <block v-for="(item,index) in tabs" :key="index">
      <view v-show="current===item.id">
        <view class="order-main" v-if="item.list.length>0">
          <block v-for="(i,j) in item.list" :key="j">
            <view class="goods">
              <view class="status active-color">
                {{i.status}}
              </view>
              <OrderItem :list='i.goods_item'></OrderItem>
              <!-- <view class="content" v-for="(k,q) in i.goods_item" :key="q">
                <image :src="k.imgUrl" mode='aspectFit' class="img" />
                <view class="main-txt">
                  <view class="title">
                    {{k.name}}
                  </view>
                  <view class="size">
                    {{k.color}}；{{k.size}}
                  </view>
                </view>
                <view class="">
                  <view class="">
                    ¥{{k.price}}
                  </view>
                  <view class="">
                    *{{k.num}}
                  </view>
                </view>
              </view>
            -->
            </view>
            <view class="order-money">
              订单金额：<text class="active-color">¥{{i.totalPrice}}</text> (含运费¥0.00)
            </view>
            <LineBorder />
            <view class="payment">
              <view class="txt">
                支付
              </view>
            </view>
          </block>
        </view>

      </view>
    </block>

    <!-- <view class="no-order">
      <view class="txt1">
        您还没有相关订单
      </view>
      <view class="txt2">
        去首页逛逛
      </view>
    </view> -->
  </view>
</template>

<script>
  import LineBorder from "@/components/common/LineBorder.vue"
  import OrderItem from "@/components/order/OrderItem.vue"
  import http from "@/common/api/reqeust.js"
  export default {
    data() {
      return {
        current: 0,
        tabs: [{
          id: 0,
          name: '全部',
          list: [{
            status: '待付款',
            totalPrice: 99999.00,
            goods_item: [{
              color: '红色',
              size: 43,
              price: 266.00,
              imgUrl: '../../static/1.jpg',
              num: 10,
              name: '大红衣服咯'
            }, {
              color: '红色2',
              size: 43,
              price: 266.00,
              imgUrl: '../../static/1.jpg',
              num: 10,
              name: '大红衣服咯'
            }]
          }]
        }, {
          id: 1,
          name: '待付款',
          list: []
        }, {
          id: 2,
          name: '待发货',
          list: []
        }, {
          id: 3,
          name: '待收货',
          list: []
        }, {
          id: 4,
          name: '待评价',
          list: []
        }],
      }
    },
    components: {
      LineBorder,
      OrderItem
    },
    methods: {
      changeTab(i) {
        this.current = i
        console.log(i);
      },
      init() {
        http.request({
          url: "/api/index/commodity_list"
        }).then(res => {
          this.commodityList = res
        })
      }
    },
    onLoad(option) {
      if (option) {
        this.current = +option.id
      }
      this.init()
    }
  }
</script>

<style lang="scss" scoped>
  .no-order {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .order-main {
    .goods {
      .status {
        display: flex;
        justify-content: flex-end;
        padding: $pd20;
      }

      .active-color {
        color: #0d99ff;
      }
    }

    .order-money {
      padding: $pd20;
      display: flex;
      justify-content: flex-end;
    }

    .payment {
      padding: $pd20;
      display: flex;
      justify-content: flex-end;

      .txt {
        border-radius: $border-commom;
        padding: 6rpx 30rpx;
        background-color: red;
        color: #fff;
      }
    }
  }
</style>
